<template>
  <div class="pagestyle">
    <div class="box">
      <div class="box_header">
        <div class="title">工作面单元</div>
        <span
          v-if="userStore.modify"
          :class="state.addModal ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="addBtn"
        >
          <svg-icon
            :class="state.addModal ? 'active' : ''"
            class-name="search-icon"
            icon-class="xinzeng"
          />
          新增工作面
        </span>
        <!-- <div class="addBtn" @click="addBtn"><img src="@/assets/images/新增-填充.png" alt="">新增工作面</div> -->
      </div>
      <div class="box_container">
        <div class="tree_box">
          <el-input
            v-model="filterText"
            style="width: 100%;margin:0 0 4px 0;"
            placeholder="模糊搜索"
          />
          <el-tree
            :data="state.treeData"
            :props="defaultProps"
            ref="treeRef"
            :filter-node-method="filterNode"
            @node-click="clickNode"
            default-expand-all
          >
              <template #default="{ node, data }">
              <div class="custom-tree-node">
                <div><img v-if="data.children" src="@/assets/images/nav/文件夹1.png" alt="">{{ node.label }}</div>
                <div v-if="data.children">
                  ({{data.children.length}})
                </div>
              </div>
            </template>
          </el-tree>
        </div>
        <div class="right" v-if="state.addModal">
          <div class="right_header">工作面信息</div>
          <div class="right_box">
            <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="评价单元名称" prop="evaluationUnitName">
                    <el-input style="width:100%;" clearable v-model="state.formData.evaluationUnitName" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="评价开始时间" prop="evaluationStartTime">
                    <el-date-picker
                      v-model="state.formData.evaluationStartTime"
                      type="datetime"
                      style="width:100%;"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="是否为突出区域" prop="salientArea">
                    <el-select v-model="state.formData.salientArea" placeholder="请选择" style="width:100%">
                      <el-option
                        v-for="item in state.tuchu"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="煤壁暴露开始时间" prop="exposureStartTime">
                    <el-date-picker
                      v-model="state.formData.exposureStartTime"
                      type="datetime"
                      style="width:100%;"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="吸附常数a" prop="adsorptionConstantA">
                    <el-input style="width:100%;" clearable v-model="state.formData.adsorptionConstantA" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="煤层倾向长度(m)" prop="coalSeamTendencyLength">
                    <el-input style="width:100%;" clearable v-model="state.formData.coalSeamTendencyLength" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="吸附常数b" prop="adsorptionConstantB">
                    <el-input style="width:100%;" clearable v-model="state.formData.adsorptionConstantB" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="煤层走向长度(m)" prop="coalSeamDirectionLength">
                    <el-input style="width:100%;" clearable v-model="state.formData.coalSeamDirectionLength" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="煤的灰分(%)" prop="coalAshContent">
                    <el-input style="width:100%;" clearable v-model="state.formData.coalAshContent" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="煤层厚度(m)" prop="coalSeamThickness">
                    <el-input style="width:100%;" clearable v-model="state.formData.coalSeamThickness" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="煤的水分(%)" prop="coalMoisture">
                    <el-input style="width:100%;" clearable v-model="state.formData.coalMoisture" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="煤壁倾向暴露面数" prop="tendencyExposureFaceNumber">
                    <el-select v-model="state.formData.tendencyExposureFaceNumber" placeholder="请选择" style="width:100%">
                      <el-option
                        v-for="item in state.msData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="煤的孔隙率(m2/m3)" prop="coalPoriness">
                    <el-input style="width:100%;" clearable v-model="state.formData.coalPoriness" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="煤壁走向暴露面数" prop="directionExposureFaceNumber">
                    <el-select v-model="state.formData.directionExposureFaceNumber" placeholder="请选择" style="width:100%">
                      <el-option
                        v-for="item in state.msData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="煤的容量" prop="coalCapacity">
                    <el-input style="width:100%;" clearable v-model="state.formData.coalCapacity" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="残余瓦斯人工测试值(Mpa)" prop="gasLabourTestValue">
                    <el-input style="width:100%;" clearable v-model="state.formData.gasLabourTestValue" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="煤的种类" prop="coalCategory">
                    <el-select v-model="state.formData.coalCategory" placeholder="请选择" style="width:100%">
                      <el-option
                        v-for="item in state.categories"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="残余瓦斯压力达标值(Mpa)" prop="gasPressureGoalValue">
                    <el-input style="width:100%;" clearable v-model="state.formData.gasPressureGoalValue" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="原始瓦斯含量(m3/t)" prop="originGasContent">
                    <el-input style="width:100%;" clearable v-model="state.formData.originGasContent" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="残余瓦斯含量达标值(m3/t)" prop="gasContentGoalValue">
                    <el-input style="width:100%;" clearable v-model="state.formData.gasContentGoalValue" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="原始瓦斯压力(Mpa)" prop="originGasPressure">
                    <el-input style="width:100%;" clearable v-model="state.formData.originGasPressure" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="逻辑对象名称" prop="logicObjectName">
                    <el-select v-model="state.formData.logicObjectName" clearable placeholder="请选择" style="width: 100%">
                      <el-option
                        v-for="item in state.logicNames"
                        :key="item.gasDrainName"
                        :label="item.gasDrainName"
                        :value="item.gasDrainName"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form> 
          </div>
          <div class="btns" v-if="userStore.modify">
            <el-button type="danger" @click="delFn">删除</el-button>
            <div>
              <el-button @click="close">取消</el-button>
              <el-button type="primary" @click="sumbitClick">确定</el-button>
            </div>
          </div>
        </div>
        <div class="right right2" v-else>
          <img class="img" src="@/assets/images/tabnopoint.png" alt="">
          <div>请选择工作面单元查看</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controller";
import { computed, onMounted, reactive } from "vue";
import { table_headers } from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import { ElMessage,ElMessageBox } from "element-plus";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();

const { proxy } = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
const upload = ref(null);
const delId = ref()
let state = reactive({
  modalTitle:'新增',
  addModal:false,
  open_detail:false,
  formData:{workspaceId:""},
  tuchu:[{label:'是',value:1},{label:'否',value:0}],
  msData:[
    {label:'0',value:0},
    {label:'1',value:1},
    {label:'2',value:2},
  ],
  categories:[
    {label:'低变质',value:'低变质'},
    {label:'高变质',value:'高变质'},
  ],
  logicNames:[],
  rules:{
    evaluationUnitName: [{
      required: true,
      message: '请输入评价单元名称',
      trigger: 'blur'
    }],
    evaluationStartTime: [{
      required: true,
      message: '请选择评价开始时间',
      trigger: 'blur'
    }],
    salientArea: [{
      required: true,
      message: '请选择突出区域',
      trigger: 'blur'
    }],
    exposureStartTime: [{
      required: true,
      message: '请选择煤壁暴露开始时间',
      trigger: 'blur'
    }],
    adsorptionConstantA: [{
      required: true,
      message: '请输入吸附常数a',
      trigger: 'blur'
    }],
    coalSeamTendencyLength: [{
      required: true,
      message: '请输入煤层倾向长度',
      trigger: 'blur'
    }],
    adsorptionConstantB: [{
      required: true,
      message: '请输入吸附常数b',
      trigger: 'blur'
    }],
    coalSeamDirectionLength: [{
      required: true,
      message: '请输入煤层走向长度',
      trigger: 'blur'
    }],
    coalAshContent: [{
      required: true,
      message: '请输入煤的灰分',
      trigger: 'blur'
    }],
    coalSeamThickness: [{
      required: true,
      message: '请输入煤层厚度',
      trigger: 'blur'
    }],
    coalMoisture: [{
      required: true,
      message: '请输入煤的水分',
      trigger: 'blur'
    }],
    tendencyExposureFaceNumber: [{
      required: true,
      message: '请选择煤壁倾向暴露面数',
      trigger: 'blur'
    }],
    coalPoriness: [{
      required: true,
      message: '请输入煤的孔隙率',
      trigger: 'blur'
    }],
    directionExposureFaceNumber: [{
      required: true,
      message: '请选择煤壁走向暴露面数',
      trigger: 'blur'
    }],
    coalCapacity: [{
      required: true,
      message: '请输入煤的容量',
      trigger: 'blur'
    }],
    gasLabourTestValue: [{
      required: true,
      message: '请输入残余瓦斯人工测试值',
      trigger: 'blur'
    }],
    coalCategory: [{
      required: true,
      message: '请选择煤的种类',
      trigger: 'blur'
    }],
    gasPressureGoalValue: [{
      required: true,
      message: '请输入残余瓦斯压力达标值',
      trigger: 'blur'
    }],
    originGasContent: [{
      required: true,
      message: '请输入原始瓦斯含量',
      trigger: 'blur'
    }],
    gasContentGoalValue: [{
      required: true,
      message: '请输入残余瓦斯含量达标值',
      trigger: 'blur'
    }],
    originGasPressure: [{
      required: true,
      message: '请输入原始瓦斯压力',
      trigger: 'blur'
    }],
    logicObjectName: [{
      required: true,
      message: '请选择逻辑对象名称',
      trigger: 'blur'
    }],
  },
  treeData:[],
  workspaceId:undefined
});
const defaultProps = {
  children: 'children',
  label: 'name',
}
// 获取树形结构数据
const getTreeData = () => {
  axios.get('/workspace/info/listWorkspaceInfoDto').then(res => {
    state.treeData = res.data
  })
}
// 获取数据详情 
const getDataInfo = (obj) =>{
  axios.post('/workspace/info/getById',{id:obj.id}).then(res => {
    state.formData = res.data
  })
}
// 获取逻辑对象名称
const getlogicName = () => {
  axios.post('/drain/calculation/list',{}).then(res => {
    state.logicNames = res.data.list
  })
}

const filterText = ref('')
const treeRef = ref()
// 树形数据筛选函数
const filterNode = (value,data) => {
  if (!value) return true
  return data.name.includes(value)
}
// 触发树形筛选方法
watch(filterText, (val) => {
  treeRef.value.filter(val)
})

// 点击树形数据节点
const clickNode = (data) =>{
  console.log(data,'datadatadatadata');
  
  if(data.status==0&&(data.children&&data.children.length==0&&data.children==null)){
    ElMessage.warning('请先添加子节点')
  }else{
    state.workspaceId=data.id
    if(data.status){
      editBtn(data)
      delId.value = data.id
    }else{
      state.addModal = false
      state.formData.workspaceId = data.id
    }
  }
}
// 打开新增弹窗
const addBtn = () => {
  if(state.formData.workspaceId != ''){
    state.addModal = true
    state.modalTitle = '新增'
    state.formData = {}
  }else{
    ElMessage.warning('请选择将要添加评价的工作面')
  }
}
// 关闭弹窗时执行
const close = () =>{
  state.addModal = false
  state.formData = {workspaceId:""}
}
// 提交
const sumbitClick = () =>{
  proxy.$refs["formRef"].validate(valid => {
    if (valid){
      state.formData.workspaceId=state.workspaceId
      if(state.modalTitle.includes('新增')){
        axios.post('/workspace/info/add',state.formData).then(res => {
          if(res.code == 200){
            ElMessage.success(res.msg)
            close()
            getTreeData()
          }
        })
      }else{
        axios.post('/workspace/info/modify',state.formData).then(res => {
          if(res.code == 200){
            ElMessage.success(res.msg)
            close()
            getTreeData()
          }
        })
      } 
    }
  })
}
// 打开编辑弹窗
const editBtn = (row) => {
  getDataInfo(row)
  state.addModal = true
  state.modalTitle = '修改'
}
// 删除工作面单元
const delFn = () => {
  ElMessageBox.confirm(
    '是否确认删除?',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(()=>{
    axios.post('/coal/face/del',[delId.value]).then(res => {
      if (res.code == 200) {
        proxy.$modal.msgSuccess(res.msg);
        getTreeData()
      }
    })
  })
}

onMounted(()=>{
  getTreeData()
  getlogicName()
})
</script>
<style lang="scss" scoped>
.pagestyle{
  padding: 16px;
  .box{
    padding: 16px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    .box_header{
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 19px;
      .title{
        font-size: 18px;
        color: #3e464f;
        font-weight: 700;
      }
      .addBtn{
        font-size: 14px;
        color: #2a84eb;
        display: flex;
        align-items: center;
        cursor: pointer;
        img{
          margin-right: 4px;
        }
      }
    }
    .box_container{
      height: calc(100% - 51px);
      display: flex;
      justify-content: space-between;
    }
  }
}
.tree_box{
  width: 27%;
  height: 100%;
  .custom-tree-node{
    width: calc(100% - 24px);
    display: flex;
    justify-content: space-between;
    color: #358cf0;
    div{
      display: flex;
      align-items: center;
    }
  }
}
.right{
  width: 69%;
  height: 100%;
  border-radius: 8px;
  .right_header{
    padding: 16px;
    border-radius: 8px 8px 0px 0px;
    background-color: #f7f7f7;
    height: 48px;
    font-size: 16px;
    font-weight: 700;
    color: #409eff;
  }
  .right_box{
    padding:16px;
    height: calc(100% - 113px);
    border: 1px solid #f7f7f7;
    border-radius:0 0 8px 8px;
  }
  .btns{
    margin: 18px 0 0 0;
    text-align: end;
  }
}
.right2{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #b6bfcc;
  img{
    width: 440px;
    height: 440px;
  }
}
</style>
